<div class="text-center p-2" style="overflow: auto">
    <small>
        <span class="bg-dark text-white p-1">待办中</span><span class="bg-secondary text-white px-2 py-1 mr-2">{{summary.created}}</span>
        <span class="bg-dark text-white p-1">开发中</span><span class="bg-info text-white px-2 py-1 mr-2">{{summary.underway}}</span>
        <span class="bg-dark text-white p-1">测试中</span><span class="bg-primary text-white px-2 py-1 mr-2">{{summary.testing}}</span>
        <span class="bg-dark text-white p-1">已完成</span><span class="bg-success text-white px-2 py-1 mr-2">{{summary.finished}}</span>
    </small>

    <div id="gantt-view" class="mt-3"></div>
</div>

<script type='text/javascript'>
$('#gantt-view').ganttView({
    data: $.parseJSON('{*gantt_data*}'),
    showWeekends: true,
    vtHeaderWidth: 300,
    behavior: {
        clickable: true,
        draggable: false,
        resizable: false,
        onClick: function(node) {
            if (node.is_summary) return;
            open_task(node.id);
        }
    }
});
</script>